<template>
  <ul class="doctor-card">
    <li v-for="(item, index) of listData" :key="index">
      <div class="expert_list ellip_paragraph">
        <a href="javascript:;">
          <img :src="item.portrait || item.avtor" class="portrait" />
          <h3>
            <strong>{{ item.name }}</strong
            >&nbsp;&nbsp;{{ item.post || item.host }}
          </h3>
          <span>{{ item.position }}</span>
          <p>
            {{ item.description }}
          </p>
        </a>
        <div class="expert_button clearfix">
          <a href="javascript:;" @click="handlerDelete(item)">
            <i class="el-icon-delete"></i>删除
          </a>
          <a href="javascript:;" @click="handlerEdit(item)">
            <i class="el-icon-edit"></i>修改
          </a>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  methods: {
    handlerDelete(item) {
      this.$confirm("此操作将永久删除该医生的所有信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.axios
          .delete(`doctor/doctor_list/delete/${item.id}`)
          .then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
      });
    },
    handlerEdit(item) {
      this.$store.commit("setDcotorListInfo", item);
      this.$router.push(`/doctorManage/edit/${item.id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
ul.doctor-card {
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-flow: wrap;
}
li:not(:nth-child(5n + 1)) {
  margin-left: 2.5%;
}
li {
  width: 18%;
  // float: left;
  display: inline;
  text-align: center;
  .expert_list {
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    // margin-left: 10px;
    margin-bottom: 13px;
    .portrait {
      width: 80px;
    }
    a > i {
      overflow: hidden;
      border-radius: 40px;
      display: inline-block;
    }
    h3,
    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    span {
      width: 100%;
      display: inline-block;
    }
    p {
      position: relative;
      line-height: 1.8em;
      height: 3.6em;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  .expert_button a:first-child {
    border-left: none;
    border-right: 1px solid #e4e4e4;
  }
  .expert_button a {
    padding: 10px 0;
    border-top: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
  }
}
.expert_list a {
  display: block;
  padding: 20px 10px;
  color: black;
  text-decoration-line: none !important;
}
.icon {
  display: block;
  padding: 0px 6px;
  width: 25px;
  height: 20px;
}
span {
  font-size: 14px;
}
p {
  font-size: 12px;
}
li div.expert_button {
  display: flex;
  justify-content: space-between;
}
li div.expert_button a {
  display: flex;
  width: 48%;
  justify-content: center;
  align-items: center;
  > i {
    margin-right: 5px;
  }
}
li div.expert_button a:hover {
  background: #e4e4e4;
}
li div.expert_button a:first-child:hover {
  background: #e68a3c69;
}
</style>